<template>
  <div class="imagePreview">
    <nut-imagepreview
      :show="previewData.isShow"
      :images="previewData.imgData"
      :show-index="false"
      @close="closeFn"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
let previewData: any = ref({
  isShow: false,
  imgData: [],
});
const closeFn = () => {
  previewData.value.isShow = false;
  previewData.value.imgData = [];
};
const showFn = (img: string) => {
  previewData.value.isShow = true;
  previewData.value.imgData = [
    {
      src: img,
    },
  ];
};

defineExpose({ showFn, closeFn });
</script>

<style lang="scss" scoped>
.imagePreview {
  :deep(.nut-popup) {
    width: 100% !important;
    z-index: 2024 !important;
  }
  :deep(.nut-overlay) {
    z-index: 2023 !important;
  }
}
</style>
